<template>
    <el-row v-if="imgURL !== null">

        <el-card id="MAIN-HEADER-CARD">
            
            <el-image
            :src="imgURL"
            />

            <div class="content">
                <div class="card-title">{{ title }}</div>
                <div class="card-detail">{{ detail }}</div>
            </div>

        </el-card>

    </el-row>
</template>

<script>
import iconList from "config/iconList.js"
export default {
    name: "adminMainHeader",    
    data() {
        return {
            title:"",
            detail:"",
            //imgURL: require("assets/icon/teach.svg")
        };
    },
    computed:{
        imgURL(){
            const name = this.$route.name
            let url = null
            iconList.forEach(icon => {
                if(icon.name === name){
                    url = icon.url
                    this.detail = icon.detail
                    this.title = icon.title
                }
            });
            return url
        }
    },
    methods: {

    },
    
};
</script>

<style scoped>
.el-image{
    height: 40px;
    width: 40px;
}
.card-detail,.card-title{
    line-height: 20px;
    height: 20px;
}
.card-title{
    font-size: 16px;
    font-weight:bolder;
}
.card-detail{
    font-size: 14px;
}
/* 
.card-detail{
} */

.el-card{
    height: 50px;
}
.content{
    display: inline-block;
    height: 40px;
    vertical-align: bottom;
    padding-left: 10px;
}
</style>

<style>
#MAIN-HEADER-CARD > .el-card__body{
    padding:5px;
}
</style>